别再争 Markdown 和 HTML 了，最终赢家可能是 SVG

来源：htmlDecode("i 小声读书")

原文链接：https://mp.weixin.qq.com/s/Lz6IcRy1YnnxqQ9TJIr3Vw

题图 ◎ SVG 也很不错哦 最近 Claude Code 工程师 Thariq 那篇「HTML 当立」的推文在 X 上爆了，浏览量过千万。Karpathy 跟着站台，说视觉是大语言模型最好的输出。读完我觉得这个二层叙事漏掉了一个关键角色，那就是 SVG。今天来讨论分析一下。
Markdown 为什么必须留在后台
训练数据里"聪明人写的东西"大量是 Markdown，模型学到的关联是"Markdown = 认真、结构化、专业"。加上 Markdown 的结构信号非常局部，一个 # 就是标题，一个 - 就是列表，模型生成时不用记很远的上下文。Token 效率高，结构清晰，解析简单。
PDF 和 Word 在 AI 眼里已经成了"最不被待见"的格式。PDF 是给打印机看的，文本顺序乱、表格全靠猜。Word 解开是一堆 XML 噪声，稀释了真正有用的信息。JSON 和 XML 对程序友好，但语言模型读它和读自然语言一样，逐 token 处理，纯属错配。
所以 Markdown 在后台的位置很稳。Agent 的记忆文件、Skill 文档、Prompt、多 Agent 之间的协议传递，目前没有更好的替代品。
HTML 是好选项，但只是文档场景的好选项
Thariq 列的 HTML 优点都站得住：信息密度高、能嵌 CSS 和 SVG、能做交互和响应式布局、传播友好（一个链接发出去就能看，不用解释什么是 .md 文件）。
但他自己也限定了使用场景：需求文档、研究报告、代码审查、交互原型。这些本来就是"文档形态、要逐段读"的场景。
问题是 AI 输出的最终物越来越不是文档形态。
公众号封面图、Threads 上的方块图、小红书的卡片图、知识图谱、产品架构图、商业一页纸、信息图，这些是"一眼看完的视觉资产"，不是"逐段读的文档"。HTML 在这种场景里其实是绕了一圈，最后还得截图发出去。
SVG 才是 AI 视觉成品的最终格式
这是我想补的第三层。
SVG 同时满足两个条件：AI 能直接生成（纯文本、token 可控、结构标签清晰），人能直接看（矢量、单文件、跨设备像素级一致）。这两个条件 PNG 满足不了第一个，HTML 满足不了第二个的纯粹度。

具体优势有这么几条：
1️⃣ 矢量缩放无损。一份 SVG 通吃公众号封面、小红书卡片、海报、PPT 截图，不同尺寸都能用。
2️⃣ 单文件自包含。不依赖 CDN，不依赖运行环境，发邮件、丢到 Telegram、贴进 Notion，渲染结果一致。
3️⃣ 可被反向嵌入。HTML 里塞 SVG 干净利落，Markdown 里贴 SVG 也能渲染，PDF 导出能保留矢量。
4️⃣ AI 写得顺手。Claude 写 SVG 比写复杂 CSS 痛快得多，每个图形元素都有明确标签，要调整时定位精准。
5️⃣ 更关键的一点：SVG 让 AI 第一次有能力"直接出图"，而不是"先写 HTML 再截图"。
我自己做公众号卡片图就有体会。早期用 HTML 加 Tailwind 写卡片，再用 Playwright 截图，链路长、依赖重。现在很多场景直接让 Claude 出 SVG，再用几行 Python 转 PNG。github-cards 这种五图卡片系列、对比图、流程图、架构图，全部走得通。
SVG 也有不行的地方，所以 HTML 不会被替代
SVG 这条路有边界。
长文阅读不行，SVG 里的文字不会自动换行重排，做响应式很痛苦。复杂交互也不行，表单、滚动列表、动态数据加载，得靠 foreignObject 塞 HTML 进来，反过来 HTML 里嵌 SVG 干净得多。可访问性也更弱，屏幕阅读器对 SVG 的支持远不如 HTML 语义标签。
所以两者不冲突。HTML 管"要逐段读的文档"，SVG 管"一眼看完的图"。要写 30 页研究报告，HTML 赢；要做一张项目架构图，SVG 赢。
三层框架更贴实际工作流
放到内容创作者的工作流里看，这三层早就分工清楚了，只是没人把它说成一个框架。
1️⃣ 写文章草稿和大纲：Markdown。 2️⃣ 最终发布的图文长内容（公众号、博客、报告页）：HTML 渲染。 3️⃣ 插图、封面、信息图、对比卡片、架构图：SVG，再导 PNG。
在 Claude Code 里怎么把 SVG 用起来
具体方案分几个层次。
最简单的，直接让 Claude 写 SVG。一句"画一张产品架构图，三层结构，配色米色加砖红"，Claude 就能吐出可粘贴的 
< svg >...</ svg >  代码。复制到 svgviewer.dev，或者在 VS Code 里装个 SVG Preview 插件，立刻就能看效果。
要批量产同一风格的图，把模板封装成 Skill。我的 github-cards Skill 就是这个思路，SKILL.md 里固定尺寸 1080×1350、字体、配色，每次只换文案。Claude 拿到主题直接套模板出五张卡片，全程不用打开 Figma。
SVG 转 PNG 是必经步骤，公众号和小红书都不直接收 SVG。最轻的方案是 Python 的 cairosvg，pip 装一个包，一行命令 
cairosvg  input .svg  -o output .png   --output-width   1080  搞定，覆盖 95% 的日常场景。要精确控制字体和阴影，换 Playwright 起 headless Chromium 加载 SVG 再截图，渲染和浏览器一致，代价是依赖更重。要做动效预览，写一份 HTML 包一层 SVG，浏览器里实时看效果，调好再单独导出。
一个踩坑提醒。让 Claude 写 SVG 时主动要求内联所有字体和样式，别引外部 。SVG 一旦依赖 CDN，迁移到离线环境就会渲染失败。我吃过一次亏，一份卡片在浏览器里好看，传到 NAS 上字体就变成了系统默认。
不过考虑后续的发展，按 Karpathy 的设想，前台会被升级成动画、3D、甚至神经渲染的视频流。SVG 撑不到这些场景，HTML 还有 Canvas 和 WebGPU 续命。但在那之前的这一两年，SVG 这层会承担越来越多"AI 视觉成品"的输出。
它不会被取代，只会被忽略。而在技术世界里，被所有人忽略，恰恰是因为它太好用。🏄‍♂️

最后补充 😎

你用 Markdown，他用 HTML，我用 SVG，大家都有美好的未来，不必过于焦虑，那些技术人员搞一顿技术名词吓唬你罢了。🤡

有任何问题可以私聊我或直接评论，就这样。 👨‍💻